<template>
  <div class="pie">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="月度统计" name="1">
        <el-date-picker
          v-model="month"
          type="month"
          placeholder="选择月"
          :clearable="false"
          value-format="yyyy-MM"
          @change="changeMonth(month)"
          style="width: 195px"
        >
        </el-date-picker>
      </el-tab-pane>
      <el-tab-pane label="年度统计" name="2">
        <el-date-picker
          v-model="year"
          type="year"
          value-format="yyyy"
          :clearable="false"
          placeholder="选择年"
          @change="changeYear(year)"
          style="width: 195px"
        ></el-date-picker>
      </el-tab-pane>
    </el-tabs>

    <div style="width: 100%; height: 312px" id="pie"></div>
    <div style="width: 19%; margin: 0 auto">项目类型支出占比</div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { selectProjectCostStatistics } from "../../../../service/financeApi";

export default {
  data() {
    return {
      myChart4: null,
      pieDataList: [],
      period: "",
      pieDataName: [],
      pieDataValue: [],
      pieData: [],
      activeName: "1",
      year: "",
      month: "",
    };
  },
  created() {
    this.getdatetime();
  },
  methods: {
    getDayData(row) {
      selectProjectCostStatistics({ period: row }).then((res) => {
        if (res.code == 0) {
          this.pieData = res.data;
          let arr = [];
          this.pieData.map((item) => {
            let obj = {
              name: item.name + item.data + "元",
              value: item.data,
            };
            arr.push(obj);
            this.pieDataList = arr;
          });
          // console.log("this.pieData", this.pieData);
          // console.log("pieDataList遍历后", this.pieDataList);
          let changeData = JSON.parse(JSON.stringify(this.pieDataList));
          // console.log("changeData", changeData);
          this.drawPie1(changeData);
        }
      });
    },

    drawPie1(changeData) {
      var myChart4 = echarts.init(document.getElementById("pie"));
      myChart4.setOption({
        color: [
          "rgba(25, 98, 224, 1)",
          "rgba(2, 173, 130, 1)",
          "rgba(252, 139, 45, 1)",
          "rgba(250, 183, 15, 1)",
        ],
        legend: {
          orient: "vertical",
          x: "left",
          data: ["管理类", "自研产品", "委托开发", "市场"],
        },
        series: {
          name: "项目类型支出占比",
          type: "pie",
          radius: ["40%", "70%"],
          // center: ["50%", "50%"],
          avoidLabelOverlap: true,
          // roseType: "radius",
          // 图形的文字标签
          label: {
            fontSize: 10,
            position: "center",
          },
          // 链接图形和文字的线条
          labelLine: {
            // length 链接图形的线条
            length: 2,
            // length2 链接文字的线条
            length2: 2,
          },
          data: changeData,
        },
      });
      window.addEventListener("resize", function () {
        myChart4.resize();
      });
    },
    getdatetime() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      this.month = year + "-" + month;
    },
    changeMonth(row) {
      // this.pieDataList = [];
      this.getDayData(row);
    },
    changeYear(row) {
      // this.pieDataList = [];
      this.getDayData(row);
    },
    handleClick() {
      let date = new Date();
      this.year = date.getFullYear() + "";
      // this.pieDataList = [];
      if (this.activeName == 2) {
        this.getDayData(this.year);
      } else if (this.activeName == 1) {
        this.getDayData(this.month);
      }
    },
  },
  mounted() {
    // this.getMonthData();
    this.getDayData(this.month);
  },
};
</script>

<style lang="scss" scoped>
.pie {
  width: 40%;
  border: 1px solid #ededed;
  float: right;
  margin-top: 20px;
  padding: 20px;
}

.el-tabs {
  width: 195px;
}
</style>
<style>
.pie .el-tabs__nav-wrap {
  margin-bottom: 0px !important;
}
</style>
